<template>
    <div>
        <div class="container user-basic-box e-m-h-auto e-m-b-15">
            <el-page-header @back="goBack" content="店员详情" class="e-p-b-15"></el-page-header>
            
            <div class="user-face">
                <div class="avatar">
                    <el-avatar :src="fileURL + details.photo" :size="100"></el-avatar>
                    <i class="iconfont icon-nan male" v-if="details.sex == '先生'"></i>
                    <i class="iconfont icon-nv female" v-else></i>
                </div>
                <div class="name"><span class="e-p-r-10">{{ details.name }}</span></div>
            </div>
            <div class="basic flex">
                <div class="item"><i class="iconfont icon-shumashouji"></i><span>手机号码：{{ details.mobile }}</span></div>
                <div class="item"><i class="iconfont icon-kehuishou"></i><span>身份证号码：{{ details.idcard }}</span>
                </div>
                <div class="item"><i class="iconfont icon-xueshengzhuce"></i><span>登录IP：{{
                    details.lastipaddress
                }}</span>
                </div>
                <div class="item"><i class="el-icon-location-outline"></i><span>工作地区：{{ details.citynames }}</span>
                </div>
                <div class="item"><i class="el-icon-location-outline"></i><span>最后登录时间：{{ details.lastlogindatetime }}</span>
                </div>
                <div  class="item"><span v-if="details.online">是否在线:在线</span><span v-if="!details.online">在线状态:离线</span>
                </div>
                <div  class="item"><span>IC卡{{ details.iccode }}</span>
                </div>
            </div>
           
        </div>


        <div class="container e-m-h-auto e-m-b-15">

                <h4>店员待处理订单</h4>
                <el-row type="flex" justify="space-between" class="nav-bar">
			<el-col :span="3">
				<!-- <el-button type="primary" icon="el-icon-plus" plain @click="create">新建账号</el-button> -->
			</el-col>
			<el-col class="text-right">
				<el-form :inline="true" label-width="auto" class="nav-bar-form">
					<el-form-item label="所属站点">
						<el-select v-model="storeid" filterable placeholder="请选择">
							<el-option v-for="item in storelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单属性">
						<el-select v-model="typeorder" placeholder="请选择" @change="getList">
							<el-option v-for="item in typeorderlist" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="订单类型">
						<el-select v-model="givetype" placeholder="请选择" @change="getList">
							<el-option v-for="item in givetypelist" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
            <div class="container e-m-h-auto e-m-t-15">
                <el-table :data="datalist" style="width: 100%">
                    <el-table-column fixed prop="number" label="编号" >
                    </el-table-column>
                    <el-table-column prop="storename" label="所属站点">
                    </el-table-column>
                        <el-table-column prop="givetype"  label="订单属性">
                        <template slot-scope="scope">
                            <span  v-if="scope.row.givetype == '1'">小哥送</span>
                            <span  v-if="scope.row.givetype == '2'">用户送</span>
                            <span  v-if="scope.row.givetype == '3'">客户组送</span>
                            <!-- <span class="color-success" v-else>已回收</span> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="typeorder"  label="订单类型">
                        <template slot-scope="scope">
                            <span  v-if="scope.row.typeorder == '1'">入库单</span>
                            <span  v-if="scope.row.typeorder == '2'">线下入库单</span>
                            <span  v-if="scope.row.typeorder == '3'">出库单</span>

                            <!-- <span class="color-success" v-else>已回收</span> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="date"  label="回收日期"></el-table-column>
                    <el-table-column prop="status"  label="订单状态">
                        <template slot-scope="scope">
                            <span class="color-danger" v-if="scope.row.status == '待入库'">待入库</span>
                            <span class="color-success" v-else>已回收</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
            </div>
        </div>
        <div class="e-m-t-15">
            <el-button @click="goBack">返回</el-button>
        </div>


    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '小哥详情' 
        }
    },
    data() {
        let password = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.form.confirpwd !== '') {
                    this.$refs.form.validateField('confirpwd');
                }
                callback();
            }
        };
        let confirpwd = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            key:"",
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            brotherForm: {
                flow: {}
            },
            dialogVisible2: false,
            datalist:[],
            id: 0,
            details: { //小哥信息详情
                level: {}
            },
            authForm: {
                idcardpath: "",
                identitycard: "",
                mobile: "",
                realname: ""
            },

            page: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            dialogVisible: false,
            form: {
                password: '',
                confirmpassword: ''
            },

            tableData: [

            ],
            tableData2: [

            ],
            typeorder:0,//属性
            givetype:0,//类型
            typeorderlist:[
                {
                value: 0,
                name: '全部' 
                },
                {
                value: 1,
                name: '入库单' 
                },
                {
                value: 2,
                name: '出库单' 
                }
            ],
            givetypelist:[
                {
                value: 0,
                name: '全部' 
                },
                {
                value: 1,
                name: '小哥送' 
                },
                {
                value: 2,
                name: '用户送' 
                },{
                value: 3,
                name: '客户组送' 
                }
            ],
            storelist:[],
            storeid:0
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.getDetails()
        // this.getAuthDetail(this.id)
        this.getList()
        this.men()
    },
    methods: {
        men(){
            this.$axios.post('/select/storelist', {
                "pageIndex": 1,
                "pageSize": 999,
                "all": true
                // "offset": 0
            }).then((res) => {
                    console.log(res)
                    // this.details = res
                    this.storelist = res.rows 
                    this.storelist.unshift({'id':0,'name':"全部"})
                    // this.dialogVisible2 = true
                })
        },
        getDetails(){
            this.$axios.get('/Admin/Staff/Details?id='+this.id).then((res)=>{
                this.details = res
            })
        },
        getList() {
            this.$axios.post('/Admin/Store/Staff/Order', {
                "pageIndex": this.page,
                "pageSize": this.pageSize,
                "key": this.key,
                "staffId": this.$route.query.id,
                "storeId": this.storeid,
                "typeOrder": this.typeorder,
                "giveType": this.givetype,
                "key":this.key
            }).then((res) => {
                    console.log(res)
                    this.datalist = res.rows 
                    this.total = res.total;
                    // this.dialogVisible2 = true
                })
        },
       
        
        goBack() {
            this.$router.go(-1)
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        // getAuthDetail(id) { //获取小哥认证信息
        //     this.$axios.get('/Admin/Brother/Account/GetAuthDetail?id=' + id).then((res) => {
        //         let form = res
        //         form.idcardpath = this.fileURL + form.idcardpath
        //         this.authForm = form
        //         console.log(this.authForm)
        //     })
        // },
      
        
       
       
        goView() {
            this.$router.push({
                path: '/user/orderView'
            })
        },
        onSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // this.$axios.post('/admin/modifypwd', this.form).then((res) => {
                    //     this.$alert('密码修改成功, 请重新登录！', '提示', {
                    //         confirmButtonText: '确定',
                    //         showClose: false,
                    //         callback: action => {
                    //             if (process.client) {
                    //                 localStorage.removeItem('lifeData')
                    //             }
                    //             this.$router.push({
                    //                 path:'/login'
                    //             })
                    //         }
                    //     });
                    // })
                } else {
                    return false;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.user-basic-box {
    // background: url(/images/bg2.jpg);
    background-size: 100%;
    background-position: center;

    .user-face {
        text-align: center;
        width: 100px;
        margin: 0 auto;
        position: relative;

        .avatar {
            .iconfont {
                font-size: 14px;
                position: absolute;
                right: 3px;
                top: 6px;
                background-color: #fff;
                height: 22px;
                width: 22px;
                line-height: 24px;
                border-radius: 100%;
            }

            .male {
                background: var(--blue);
                color: #fff;
            }

            .female {
                background: var(--pink);
                color: #fff;
            }
        }
    }

    .basic {
        font-size: 14px;
        align-items: center;
        justify-content: center;
        margin-top: 15px;

        .item {
            margin: 0 10px;
        }
    }
}


.statistics-content {
    display: flex;
    text-align: center;

    .item {
        &+.item {
            border-left: 1px solid var(--light);
            padding-left: 30px;
        }

        .icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid var(--light);
            background-color: #f2f3f5;
            padding: 5px;
            margin: 0 20px 0 0;
            box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
        }

        label {
            color: var(--grey);
            font-size: 12px;
            margin-bottom: 5px;
            display: block;
        }

        .num {
            font-size: 30px;
        }
    }
}
</style>
